<script setup lang="ts">
import { onMounted, ref } from "vue";
import ReCol from "@/components/ReCol";
import { BarChart, LineCardChart, PieChart } from "./components/chart";
import {
  education,
  employee,
  employment,
  gender,
  LineChartVo,
  resignation,
  salary,
  yearEmployee
} from "@/api/analyse";
import { currentYear } from "@/utils/date";

defineOptions({
  name: "analyse"
});

const employeeData = ref<LineChartVo>({
  value: 0,
  percent: "0%",
  lineData: []
});
const employmentData = ref<LineChartVo>({
  value: 0,
  percent: "0%",
  lineData: []
});
const resignationData = ref<LineChartVo>({
  value: 0,
  percent: "0%",
  lineData: []
});

const genderData = ref([]);
const educationData = ref([]);

const barTitle = ref([]);
const barData = ref([]);
const barColumn = ref([]);

const salaryData = ref([]);
const salaryColumn = ref([]);

onMounted(() => {
  employee().then(res => {
    employeeData.value = res;
  });
  employment().then(res => {
    employmentData.value = res;
  });
  resignation().then(res => {
    resignationData.value = res;
  });
  gender().then(res => {
    res.forEach(vo => {
      genderData.value.push({
        name: vo.column,
        value: vo.count
      });
    });
  });
  education().then(res => {
    res.forEach(vo => {
      educationData.value.push({
        name: vo.column,
        value: vo.count
      });
    });
  });
  yearEmployee(new Date().getFullYear() - 1).then(res => {
    barColumn.value = res.column;
    barTitle.value = [];
    barData.value = [];
    res.data.forEach(d => {
      barTitle.value.push(d.name);
      barData.value.push(d.data);
    });
  });
  salary().then(res => {
    res.forEach(d => {
      salaryData.value.push(d.count);
      salaryColumn.value.push(d.column);
    });
  });
});
</script>

<template>
  <div>
    <ElRow :gutter="24" justify="space-around">
      <ReCol
        class="mb-[18px]"
        :value="8"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80
          }
        }"
      >
        <LineCardChart
          title="员工统计"
          bgColor="#effaff"
          color="#41b6ff"
          icon="ri:group-line"
          :count="employeeData.value"
          :percent="employeeData.percent"
          :lineData="employeeData.lineData"
        />
      </ReCol>
      <ReCol
        class="mb-[18px]"
        :value="8"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * 2
          }
        }"
      >
        <LineCardChart
          title="入职统计"
          bgColor="#effaff"
          color="#45b97c"
          icon="clarity:employee-line"
          :count="employmentData.value"
          :percent="employmentData.percent"
          :lineData="employmentData.lineData"
        />
      </ReCol>
      <ReCol
        class="mb-[18px]"
        :value="8"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * 3
          }
        }"
      >
        <LineCardChart
          title="离职统计"
          bgColor="#effaff"
          color="#d71345"
          icon="fluent-mdl2:leave-user"
          :count="resignationData.value"
          :percent="resignationData.percent"
          :lineData="resignationData.lineData"
        />
      </ReCol>

      <ReCol
        class="mb-[18px]"
        :value="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">
              {{ currentYear() - 1 }}年度统计
            </span>
          </div>
          <div class="flex justify-between items-start mt-3">
            <BarChart
              :color="['#41b6ff', '#e85f33']"
              :title="barTitle"
              :data="barData"
              :column="barColumn"
            />
          </div>
        </el-card>
      </ReCol>

      <ReCol
        class="mb-[18px]"
        :value="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">薪资结构</span>
          </div>
          <div class="flex justify-between items-start mt-3">
            <BarChart
              :title="['薪资区间']"
              :data="[salaryData]"
              :column="salaryColumn"
            />
          </div>
        </el-card>
      </ReCol>

      <ReCol
        class="mb-[18px]"
        :value="12"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 500
          }
        }"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">员工性别比例</span>
          </div>
          <div class="flex justify-between items-start mt-3">
            <PieChart :data="genderData" :color="['#e85f33', '#41b6ff']" />
          </div>
        </el-card>
      </ReCol>
      <ReCol
        class="mb-[18px]"
        :value="12"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 500
          }
        }"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">员工学历比例</span>
          </div>
          <div class="flex justify-between items-start mt-3">
            <PieChart :data="educationData" :color="[]" />
          </div>
        </el-card>
      </ReCol>
    </ElRow>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
